<template>
	<view class="root">
		<view
			class="bgc-fff"
			:style="{
				padding: `40rpx 30rpx`,
				borderBottom: `1rpx solid #eee`,
			}"
		>
			<label>
				<view class="f1">
					<text class="color-333 fs-30"> 付款给 {{ payInfo.name || "--" }} </text>
					<text class="color-999 fs-26 mt-22">
						{{ payInfo.des || "--" }}
					</text>
				</view>
				<image
					class="bgc-eee width-100 height-100 br-10"
					:src="payInfo.logo"
					mode="aspectFill"
				/>
			</label>
			<view class="mt-70">
				<text class="color-999 fs-30">支付金额</text>

				<label class="mt-30 lh-1">
					<text class="color-333 fs-60 fw-700">￥</text>
					<input
						class="input fs-44 pl-26 pr-26 f1 height-100percent"
						type="digit"
						:focus="true"
						placeholder="请输入金额"
						placeholder-style="color: #999"
						v-model="amount"
					/>
				</label>
			</view>
		</view>

		<label class="bgc-fff jc-sb mt-24" :style="{ padding: `50rpx 24rpx 50rpx 40rpx` }">
			<text class="color-333 fs-30"> 可使用余额：{{ payInfo.money || "--" }} </text>
			<switch @change="changeSwitch" :checked="useBalance" type="checkbox" color="#fff" />
		</label>
		<view class="bgc-fff mt-2 pl-24 pr-24">
			<button
				class="fs-34 mt-70 lh-100 ml-0 mr-0 br-20 bgc-09bd62"
				type="primary"
				@click="pay"
				:disabled="!Number(amount)"
			>
				付款
			</button>
			<text class="color-acacac fs-24 mt-44 mb-50">
				{{ payInfo.tips || "" }}
			</text>
		</view>

		<view class="absolute bottom-88 width-100percent ai-center">
			<text class="color-999 fs-24">{{ payInfo.store_name || "" }}</text>
			<text class="color-ccc fs-22 mt-12">{{ payInfo.identity || "" }}</text>
		</view>
	</view>
</template>

<script lang="ts">
	import { sleep } from "@/static/libs/utils";
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class Pay extends Vue {
		// component property
		amount: string = "";
		useBalance: boolean = false;
		payInfo: AnyObject = {};
		onShow() {
			uni.showToast({ icon: "loading", title: "Loading..." });
			this.$request.get("/index/payInfo").then(({ data }) => {
				uni.hideLoading();
				this.payInfo = data;
			});
		}
		changeSwitch({ detail }: AnyObject) {
			this.useBalance = detail.value;
		}
		async pay() {
			if (!Number(this.amount)) {
				uni.showToast({ title: "请输入正确付款金额", icon: "none" });
				return;
			}

			this.$request
				.get("/index/pay", {
					price: this.amount,
					type: Number(this.useBalance),
				})
				.then(({ data: orderInfo }) => {
					const successCallback = () => uni.navigateTo({ url: "/pages/client/PayResult" });

					this.useBalance
						? successCallback()
						: uni.requestPayment({
								provider: "wxpay",
								...orderInfo,
								success: successCallback,
						  });
				})
				.catch(async ({ code, msg: content }) => {
					if (code === 2) {
						const [showFail, showRes]: any = await uni.showModal({
							title: "提示",
							content,
							confirmText: "去充值",
						});
						if (showFail) return;
						showRes.confirm && uni.navigateTo({ url: "/pages/client/StoreCard" });
					}
				});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	::v-deep {
		switch {
			transform: scale(0.8);
			.wx-checkbox-input,
			.uni-checkbox-input {
				border-radius: 50%;
				border-color: #09bd62;
				background-color: transparent;
				&.wx-checkbox-input-checked,
				&.uni-checkbox-input-checked {
					border-color: #09bd62;
					background-color: #09bd62;
				}
			}

			&:not([disabled]) {
				.wx-checkbox-input:hover,
				.uni-checkbox-input:hover {
					border-color: #09bd62;
				}
			}
			&[disabled] {
				.wx-checkbox-input,
				.uni-checkbox-input {
					background-color: #f5f5f5;
				}
			}
		}
	}
</style>